import { getRouters, getFakeRouters } from "@/api/routers";
import { routeInfoById } from "@/config/routers";
import { getLang } from "@/utils/lang";

const MapSite = {
  state: {
    // localRoutes:本地已经配置好的路由，需要与远程获取的路由组合在一起，形成完整的路由。在第二个项目后，插入远程路由。
    localRoutes: [
      {
        path: "/",
        redirect: "/home"
      },
      {
        title: "首页",
        path: "/home",
        name: "home",
        component: "Home"
      },
      {
        path: "/register",
        name: "register",
        component: "Register"
      },
      {
        path: "/findPassword",
        name: "findPassword",
        component: "findPassword"
      },
      {
        path: "/specExhibition/:id",
        name: "specExhibition",
        component: "specExhibition",
        redirect: "/specExhibition/:id/home",
        children: [
          {
            path: "home",
            name: "specExhibition-home",
            component: "specExhibitionHome"
          },
          {
            path: "introduce",
            name: "specExhibition-introduce",
            component: "specExhibitionIntroduce"
          },
          {
            path: "exhibit",
            name: "specExhibition-exhibit",
            component: "specExhibitionExhibit",
            // redirect: "/specExhibition/:id/exhibit/list/:typeId",
            children: [
              {
                path: "list/:typeId",
                name: "specExhibition-exhibit-list",
                component: "specExhibitionExhibitList",
                children: [
                  {
                    path: "detail/:itemId",
                    name: "specExhibition-exhibit-item",
                    component: "specExhibitionExhibitItem"
                  }
                ]
              }
            ]
          },
          {
            path: "scene",
            name: "specExhibition-scene",
            component: "specExhibitionScene"
          }
        ]
      },
      {
        path: "/userCenter",
        name: "userCenter",
        component: "userCenter",
        title: "个人信息",
        enTitle: "Personal",
        redirect: "/userCenter/myInfo",
        children: [
          {
            path: "myInfo",
            name: "userCenter-myInfo",
            component: "userCenterMyInfo",
            title: "个人信息",
            children: [
              {
                path: "edit",
                name: "userCenter-myInfo-edit",
                component: "userCenterMyInfoEdit"
              },
              {
                path: "modifyPS",
                name: "userCenter-myInfo-modifyPS",
                component: "userCenterMyInfoModifyPs"
              }
            ]
          },
          {
            path: "myAppointment",
            name: "userCenter-myAppointment",
            component: "userCenterMyAppointment",
            title: "我的预约"
          },
          {
            path: "myArt",
            name: "userCenter-myArt",
            component: "userCenterMyArt",
            title: "我的创意"
          },
          {
            path: "myExhibition",
            name: "userCenter-myExhibition",
            component: "userCenterMyExhibition",
            title: "展览作品"
          }
        ]
      }
    ],
    // remoteRoutes:通过接口，获取路由配置项。与本地路由一起组合成完整的路由。
    remoteRoutes: [], //通过接口，获取路由配置项。与本地路由一起组合成完整的路由。
    isRemoteRoutesAdded: false
  },
  mutations: {
    SET_REMOTE_ROUTES: (state, routes) => {
      state.remoteRoutes = routes;
    },
    REMOTE_ROUTES_ADDED: state => {
      state.isRemoteRoutesAdded = true;
    },
    switchEnglishRoute: state => {
      state.localRoutes[1] = {
        title: "Home",
        path: "/home",
        name: "home",
        component: "EnglishHome"
      };
    },
    switchChineseRoute: state => {
      state.localRoutes[1] = {
        title: "首页",
        path: "/home",
        name: "home",
        component: "Home"
      };
    }
  },
  actions: {
    GetRemoteRoutes({ commit, state }) {
      return new Promise((resolve, reject) => {
        let lang = getLang();
        if (lang == "en") {
          state.localRoutes[1] = {
            title: "Home",
            path: "/home",
            name: "home",
            component: "EnglishHome"
          };
        }
        getRouters(lang).then(res => {
          const usefulProperty = [
            //
            "title",
            "id",
            "children",
            "style",
            "titleEn",
            "parentId",
            "path",
            "component",
            "name",
            "redirect",
            "newPage",
            "url"
          ];

          let remoteRoutes = res.data.recordsList;
          // 1. 对一级菜单进行操作
          remoteRoutes.forEach(route => {
            // 1.1清理没用的属性
            for (let key in route) {
              if (!usefulProperty.includes(key)) {
                delete route[key];
              }
            }

            // 1.2为一级菜单赋值
            route.path =
              lang === "en" ? `/${route.title}` : `/${route.titleEn}`;
            route.name = lang === "en" ? route.title : route.titleEn;
            route.component = "commonSecondaryPage";

            // 2. 对二级菜单进行操作
            if (route.children) {
              route.children.forEach(child => {
                // 2.1清理没用的属性
                for (let key in child) {
                  if (!usefulProperty.includes(key)) {
                    delete child[key];
                  }
                }

                switch (child.style) {
                  case 0:
                    // 2.2 当页面类型为公共详情页
                    child.path = `${route.name}-detail-${child.id}`;
                    child.name = `${route.name}-detail-${child.id}`;
                    child.component = "commonDetailPage";
                    break;
                  case 9:
                    // 2.3 当页面类型为自定义页
                    let info = routeInfoById(child.id, route);
                    child.path = info.path;
                    child.component = info.component;
                    child.name = info.name;
                    if (info.hide) {
                      child.hide = true;
                    }
                    if (info.hasDetail) {
                      let detail = {
                        path: `${child.path}/detail/:id`,
                        name: `${child.name}-detail`,
                        component: info.detailComponent || "commonDetailPage",
                        hide: true
                      };
                      route.children.push(detail);
                    }
                    break;

                  default:
                    // 2.4 当页面类型为公共列表页
                    child.path = `${route.name}-list-${child.id}`;
                    child.name = `${route.name}-list-${child.id}`;
                    child.component = "commonListPage";
                    let detail = {
                      //文章去掉文章详情-使用空格去判断展示foot的路由列表
                      // title: `${child.title} `,
                      path: `${route.name}-list-${child.id}/detail/:id`,
                      name: `${route.name}-detail-${child.id}`,
                      component: "commonDetailPage",
                      hide: true
                    };
                    route.children.push(detail);
                }
              });
            }
          });

          commit("SET_REMOTE_ROUTES", remoteRoutes);
          resolve(remoteRoutes);
        });
      });
    },
    remoteRoutesAdded({ commit }) {
      commit("REMOTE_ROUTES_ADDED");
    },
    switchChineseRoute({ commit }) {
      commit("switchChineseRoute");
    },
    switchEnglishRoute({ commit }) {
      commit("switchEnglishRoute");
    }
  }
};

export default MapSite;
